﻿@using DevExtreme.NETCore.Demos.Models;

@(Html.DevExtreme().DataGrid<OrderWithDelivery>()
    .ID("gridContainer")
    .ShowBorders(true)
    .FilterRow(filterRow => filterRow
        .Visible(true)
        .ApplyFilter(GridApplyFilterMode.Auto)
    )
    .SearchPanel(searchPanel => searchPanel
        .Visible(true)
        .Width(240)
        .Placeholder("Search...")
    )
    .HeaderFilter(headerFilter => headerFilter.Visible(true))
    .Columns(columns => {
        columns.AddFor(m => m.OrderNumber)
            .Width(140)
            .HeaderFilter(filter => filter.GroupInterval(10000));

        columns.AddFor(m => m.OrderDate)
            .Width(120)
            .Alignment(HorizontalAlignment.Right)
            .CalculateFilterExpression(@<text>
                function(value, selectedFilterOperations, target) {
                    if(target === "headerFilter" && value === "weekends") {
                        return [[getOrderDay, "=", 0], "or", [getOrderDay, "=", 6]];
                    }
                    return this.defaultCalculateFilterExpression.apply(this, arguments);
                }
            </text>)
            .HeaderFilter(filter => filter.DataSource(@<text>
                function(data) {
                    data.dataSource.postProcess = function(results) {
                        results.push({
                            text: "Weekends",
                            value: "weekends"
                        });
                        return results;
                    };
                }
            </text>));

        columns.AddFor(m => m.DeliveryDate)
            .Width(180)
            .Alignment(HorizontalAlignment.Right)
            .Format("M/d/yyyy, HH:mm");

        columns.AddFor(m => m.SaleAmount)
            .Alignment(HorizontalAlignment.Right)
            .Format(Format.Currency)
            .EditorOptions(new { format = "currency", showClearButton = true })
            .HeaderFilter(filter => filter.DataSource(new[] {
                new {
                    text = "Less than $3000",
                    value = new object[] { "SaleAmount", "<", 3000 }
                },
                new {
                    text = "$3000 - $5000",
                    value = new object[] { new object[] { "SaleAmount", ">=", 3000 }, new object[] { "SaleAmount", "<", 5000 } }
                },
                new {
                    text = "$5000 - $10000",
                    value = new object[] { new object[] { "SaleAmount", ">=", 5000 }, new object[] { "SaleAmount", "<", 10000 } }
                },
                new {
                    text = "$10000 - $20000",
                    value = new object[] { new object[] { "SaleAmount", ">=", 10000}, new object[] { "SaleAmount", "<", 20000}}
                },
                new {
                    text = "Greater than $20000",
                    value = new object[] { "SaleAmount", ">=", 20000 }
                }
            }));

        columns.AddFor(m => m.Employee);

        columns.AddFor(m => m.CustomerStoreCity).HeaderFilter(hf => hf.AllowSearch(true));
    })
    .DataSource(d => d.Mvc().Controller("DataGridFiltering").LoadAction("Get").Key("ID"))
)

<div class="options">
    <div class="caption">Options</div>
    <div class="apply-filter option">
        <span>Apply Filter</span>

        @{
            var dataSource = new[] {
                new ApplyFilterType {
                    Key = "auto",
                    Name = "Immediately"
                },
                new ApplyFilterType {
                    Key = "onClick",
                    Name = "On Button Click"
                }
            };
        }

        @(Html.DevExtreme().SelectBox()
            .ID("applyFilterEditor")
            .DataSource(dataSource)
            .Value(dataSource[0].Key)
            .ValueExpr("Key")
            .DisplayExpr("Name")
            .OnValueChanged(@<text>
                function(data) {
                    var dataGrid = $("#gridContainer").dxDataGrid("instance");
                    dataGrid.option("filterRow.applyFilter", data.value);
                }
            </text>)
        )

    </div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Text("Filter Row")
            .Value(true)
            .OnValueChanged(@<text>
                function(data) {
                    var dataGrid = $("#gridContainer").dxDataGrid("instance");
                    dataGrid.clearFilter();
                    dataGrid.option("filterRow.visible", data.value);

                    $("#applyFilterEditor")
                        .dxSelectBox("instance")
                        .option("disabled", !data.value);
                }
            </text>)
        )
    </div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Text("Header Filter")
            .Value(true)
            .OnValueChanged(@<text>
                function(data) {
                    var dataGrid = $("#gridContainer").dxDataGrid("instance");
                    dataGrid.clearFilter();
                    dataGrid.option("headerFilter.visible", data.value);
                }
            </text>)
        )
    </div>
</div>

<script>
    function getOrderDay(rowData) {
        return (new Date(rowData.OrderDate)).getDay();
    }
</script>
